<template>
  <view>
    <view class="tn-padding-sm">
      <view v-show="total">
        <block v-for="(item, index) in list" :key="index">
          <uni-card class="card" :isFull="true" @click="toDetail(item)">
            <text class="uni-body">
              <view>
                <view v-if="item.isClosed === '0'" class="right-top tn-bg-red">未结案</view>
                <view v-else class="right-top tn-bg-green">已结案</view>
              </view>
              <view>
                <text style="line-height: 2em; color: #3a3a3a" class="label tn-text-xl tn-text-bold">编号：{{ item.caseNo }}</text>
              </view>
              <view>
                <text class="label">
                  车牌号：
                  <text class="value">{{ item.carProvince }}{{ item.carNo }}</text>
                </text>
              </view>
              <view>
                <text class="label">
                  发生地点：
                  <text class="value">{{ item.enquireLoc }}。</text>
                </text>
              </view>
              <view>
                <text class="label">
                  发生时间：
                  <text class="value">{{ item.happentime }}。</text>
                </text>
              </view>
            </text>
          </uni-card>
        </block>
        <view class="tn-margin-sm tn-padding-bottom-sm">
          <uni-pagination :total="total" v-model="query.pageNum" :pageSize="query.pageSize" @change="load"></uni-pagination>
        </view>
      </view>
    </view>

    <view class="add-btn tn-main-gradient-blue tn-shadow-gray" @click="toAdd">
      <view class="tn-icon-add tn-text-xxl" />
    </view>
  </view>
</template>

<script>
import { onMounted } from 'vue';
import { searchDoc } from '@/api/lupeiwenshu.js';

export default {
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      list: []
    };
  },
  onShow() {
    setTimeout(uni.startPullDownRefresh, 500);
  },
  onPullDownRefresh() {
    this.load();
  },
  onUnload() {
    let list = getApp().globalData.apiList;
    try {
      list.values().forEach((item) => item.abort());
    } catch (error) {
      //TODO handle the exception
    }
  },
  onHide() {
    let list = getApp().globalData.apiList;
    try {
      list.values().forEach((item) => item.abort());
    } catch (error) {
      //TODO handle the exception
    }
  },
  methods: {
    load() {
      searchDoc(this.query)
          .then((res) => {
            this.total = res.total;
            this.list = res.rows;
          })
          .finally(() => {
            uni.stopPullDownRefresh();
          });
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/roadCompensation/add/add?id=' + item.id+'&isClosed='+item.isClosed
      });
    },
    toAdd() {
      uni.navigateTo({
        url: '/pages/roadCompensation/zonghexinxi/zonghexinxi?isClosed=0'
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.card {
  margin: 0 !important;
  border-radius: 6px;
  margin-top: 15px !important;

  .right-top {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 6rpx;
    color: white;
    padding: 0 15rpx;
  }

  ::v-deep {
    .uni-card__header {
      .uni-card__header-box {
        .uni-card__header-content-title {
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }

    .title {
      color: #333;
      line-height: 1.5em;
      font-size: 32rpx;
      font-weight: bold;
    }

    view {
      padding: 2px;
      line-height: 2em;
    }

    .value {
      color: $tn-color-gray;
    }
  }
}

.add-btn {
  position: fixed;
  right: 40rpx;
  bottom: 100rpx;
  border-radius: 50%;
  padding: 30rpx;
}

.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
}
</style>
